<template>
  <el-container class="custom__container">
    <el-main class="custom__main">
      <hsa-adaptive-container>
        <!-- 查询 -->
        <hsa-adaptive-pane>
          <hsa-title-pane>
            <hsa-title-pane-item title="查询条件">
              <el-form label-width="80px">
                <hsa-row :gutter="20">
                  <has-col :span="8">
                    <el-form-item label="报表名称">
                      <el-input placeholder="请输入"></el-input>
                    </el-form-item>
                  </has-col>
                  <template #footbar>
                    <el-button @click="handleReset">重置</el-button>
                    <el-button type="primary" @click="handleQuery"
                      >查询</el-button
                    >
                  </template>
                </hsa-row>
              </el-form>
            </hsa-title-pane-item>
          </hsa-title-pane>
        </hsa-adaptive-pane>

        <hsa-adaptive-pane>
          <hsa-title-pane>
            <hsa-title-pane-item title="报表信息" fill>
              <template #toolbar>
                <el-row style="width: '400px'">
                  <el-button type="primary" @click="createFolder"
                    >新增文件夹</el-button
                  >
                  <el-button type="primary" @click="createReport"
                    >新建</el-button
                  >
                  <div class="page-type">
                    <el-radio-group v-model="layoutMode">
                      <el-radio-button label="layFlat">平铺</el-radio-button>
                      <el-radio-button label="folders">文件夹</el-radio-button>
                    </el-radio-group>
                  </div>
                </el-row>
              </template>
              <!-- <hsa-table v-bind="tableOption"></hsa-table> -->
              <div v-if="layoutMode == 'folders'">
                <div v-for="item in folders" :key="item.floderName">
                  <div class="table-title">
                    <el-icon><FolderOpened /></el-icon
                    ><span>{{ item.floderName }}</span>
                  </div>
                  <!-- <table-node ref="foldersTableRef"></table-node> -->
                  <hsa-table v-bind="item.tableOption"></hsa-table>
                </div>
              </div>
              <div v-else>
                <hsa-table v-bind="tableOption"></hsa-table>
              </div>
            </hsa-title-pane-item>
          </hsa-title-pane>
        </hsa-adaptive-pane>
        <add-popup ref="AddPopupRef"></add-popup>
        <add-folder-popup ref="addFolderPopupRef"></add-folder-popup>
        <move-popup ref="MovePopupRef"></move-popup>
        <reset-name-popup ref="resetNamePopupRef"></reset-name-popup>
      </hsa-adaptive-container>
    </el-main>
  </el-container>
  <!-- 报表信息部分 -->
</template>

<script setup lang="ts">
import { nextTick, ref, watch, reactive, h } from "vue";
import AddPopup from "./popup/add.vue";
import addFolderPopup from "./popup/addfolder.vue";
// import TableNode from "./popup/table.vue";
import MovePopup from "./popup/move.vue";
import resetNamePopup from "./popup/resetName.vue";
import type { HsaTableColumn } from "hsa-ui";
import { FolderOpened } from "@element-plus/icons-vue";
import { ElIcon } from "element-plus";

// 编辑报表方法
const editReport = (report: any) => {
  console.log(`编辑报表 ${report.name}`);
};

// 删除报表方法
const deleteReport = (report: any) => {
  console.log(`删除报表 ${report.name}`);
};
// 移动报表方法
const MovePopupRef = ref(null);
const moveReport = (report: any) => {
  console.log(`移动报表 ${report.name}`);
  MovePopupRef.value.open();
};
// 新增文件夹方法
const addFolderPopupRef = ref(null);
const createFolder = () => {
  console.log("新增文件夹操作");
  addFolderPopupRef.value.open();
};
const editFolder = (row: any) => {
  console.log("新增文件夹操作");
  addFolderPopupRef.value.open();
};
// 新建报表方法
const AddPopupRef = ref(null);
const createReport = () => {
  console.log("新建报表操作");
  AddPopupRef.value.open();
};

//重命名文件夹
const resetNamePopupRef = ref(null);
const resetnameFolder = (folder: any) => {
  console.log(`重命名文件夹 ${folder.name}`);
  resetNamePopupRef.value.open();
};
// 删除文件夹方法
const deleteFolder = (folder: any) => {
  console.log(`删除文件夹 ${folder.name}`);
};

const tableOption = reactive({
  showIndex: true,
  data: ref<any[]>([
    {
      createTime: "2016-05-03",
      createUser: "王小虎",
      name: "根文件夹",
      type: "folder",
    },
    {
      createTime: "2016-05-03",
      createUser: "王小虎",
      name: "驱动类型",
    },
  ]),
  columns: ref<HsaTableColumn[]>([
    {
      align: "center",
      label: "名称",
      prop: "name",
      render: (row: any) => {
        if(row.type === "folder"){
          return h("div", [h(ElIcon, [h(FolderOpened)]), h("span", row.name)])
        }
        return h("div", row.name);
      },
    },
    { align: "center", label: "创建人", minWidth: 200, prop: "createUser" },
    { align: "center", label: "创建时间", width: 250, prop: "createTime" },
    {
      type: "button",
      label: "操作",
      width: 240,
      fixed: "right",
      buttonGroup: [
        {
          label: "重命名",
          type: "primary",
          display: (row: any) => {
            return row.type === "folder";
          },
          click: (row) => {
            console.log("重命名", row);
            resetnameFolder(row);
          },
        },
        {
          label: "移动",
          type: "primary",
          display: (row: any) => {
            return row.type !== "folder";
          },
          click: (row) => {
            console.log("移动", row);
            moveReport(row);
          },
        },
        {
          label: "编辑",
          type: "primary",
          click: (row) => {
            console.log("编辑", row);
            if (row.type === "folder") {
              editFolder(row);
              return;
            }
            editReport(row);
          },
        },
        {
          label: "删除",
          type: "danger",
          click: (row) => {
            console.log("删除", row);
            deleteReport(row);
          },
        },
      ],
    },
  ]),
});
const folders = ref([{ floderName: "根目录", tableOption: tableOption }]);
// 当前页码
const currentPage = ref(1);
// 每页显示数量
const pageSize = ref(100);
// 布局模式
const layoutMode = ref("layFlat");

watch(layoutMode, (value) => {
  console.log(value, 878787);
});
// 重置方法
const handleReset = () => {
  console.log("执行重置操作");
};

// 查询方法
const handleQuery = () => {
  console.log("执行查询操作");
};

// 处理每页数量变化
const handlePageSizeChange = (newSize: number) => {
  pageSize.value = newSize;
};

// 处理当前页码变化
const handleCurrentPageChange = (newPage: number) => {
  currentPage.value = newPage;
};
</script>

<style scoped>
.query-condition {
  margin-bottom: 16px;
  border-bottom: 1px solid #e4e7ed;
  padding-bottom: 16px;
  background: #fff;
  border-radius: 4px;
  padding: 16px;
}

.report-info {
  margin-top: 16px;
  border-radius: 4px;
  background: #fff;
  padding: 16px;
}

.pagination-container {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
}
.handle-btn {
  display: flex;
  justify-content: flex-end;
  justify-items: center;
  margin: 0 0 16px;
}
.page-type {
  margin-left: 16px;
}
.custom__main {
  padding: 0;
  padding-left: 10px;
}
</style>
